<template>

  <div class="search">
    <nav-bar class="header">
      <div class="left" slot="left" @click="backClick">
        <img src="~assets/img/common/back.svg" alt="">
      </div>
      <div class="center" slot="center">搜索</div>
    </nav-bar>
    <div class="search-box">
      <form action="/">
        <van-search 
          v-model="value" 
          show-action
          autofocus
          shape="round"
          @search="onSearch"
          @cancel="onCancel"/>
      </form>
    </div>
    
    <div class="content">
      <div class="goods-item" v-for="good in goods" :key="good.id">
        <div class="item-left">{{good.goods_name}}</div>
        <div class="item-right">
          <span>{{tag}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search , Toast} from 'vant';
Vue.use(Search);
import NavBar from 'components/common/navbar/NavBar'

import {getSearchData} from 'network/search'
export default {
  name:'Search',
  components:{
    NavBar,
   
  },
  data() {
    return {
      value: '',
      goods:[],
      tag:'',
    };
  },
  methods: {
    onSearch(val) {
      this.tag = val;
      getSearchData(val).then(res => {
        this.goods = res.data.message.goods
      }) 
      
    },
    onCancel() {
      Toast('取消');
    },
    backClick(){
      this.$router.go(-1);
    }
  },
}
</script>

<style scoped>

.header{
  color: #fff;
  background: var(--color-tint);
  z-index: 9;
  width: 100%;
}
.left img{
  vertical-align: middle;
}
.search-box{
  position: sticky;
  top:0;
}
.goods-item{
  display: flex;
  background: #f6f6f6;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  font-size: 14px;
  padding: 0 10px;
  margin-bottom: 1px;
}
.item-left,.item-right{
  flex:1;
  
}
.item-left{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-right{
  text-align: right;
}
.item-right span{
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
  background:rgba(10, 10, 10, .2);
  vertical-align: middle;
}
</style>